<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的研究</title>
  </head>
  <body>
    <div>
      <button data-event="hiden">按钮</button>
      <div data-event="changeBackgroundColor" data-bg-color="red">bigabc.top</div>
    </div>
    <script>
      class ProxyEvent {
        constructor(obj) {
          let event = obj.dataset.event
          if (this[event]) obj.addEventListener('click', this[event].call(obj))
        }
        hiden() {
          console.log(this.textContent)
        }
        changeBackgroundColor() {
          console.log(this.textContent)
          this.style.backgroundColor = this.dataset.bgColor
        }
      }

      document.body.addEventListener('click', function () {
        new ProxyEvent(event.target)
      })

      console.log(document.querySelector('button').dataset)
    </script>
  </body>
</html>
